<template>
  <div class="logo low-app-logo">
    <router-link :to="devMode ? {path:`/app/${appId}`} : {}">

      <img v-if="logoSrc" class="logo-img" :src="logoSrc" alt="应用logo"/>
      <low-app-icon v-else size="small" :type="appInfo.iconType" :backColor="appInfo.iconBackColor"/>

      <h1 class="logo-title" v-if="showTitle">{{ title }}</h1>
    </router-link>
  </div>
</template>

<script>
import { mixin } from '@/utils/mixin.js'
import { getFileAccessHttpUrl } from '@/api/manage'
import LowAppStoreMixins from '../mixins/LowAppStoreMixins'
import LowAppIcon from '../components/LowAppIcon'

export default {
  name: 'LowAppLogo',
  components: {LowAppIcon},
  mixins: [mixin, LowAppStoreMixins],
  props: {
    title: {
      type: String,
      default: 'Jeecg-Boot Pro',
      required: false
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    },
  },
  computed: {
    logoSrc() {
      if (this.appInfo.appCoverImg) {
        return getFileAccessHttpUrl(this.appInfo.appCoverImg)
      }
      return ''
    },
  },
}
</script>
<style lang="less" scoped>
/*缩小首页布 局顶部的高度*/
@height: 59px;

.sider {
  box-shadow: none !important;

  .logo {
    height: @height !important;
    line-height: @height !important;
    box-shadow: none !important;
    transition: background 300ms;

    a {
      color: white;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }

  }

  &.light .logo {
    background-color: @primary-color;
  }

  .low-app-logo {
    padding-left: 8px;

    .logo-title {
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: top;
    }

    .app-item-icon {
      display: inline-block;
      margin-top: 8px;
      vertical-align: top;
    }
    .logo-img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      margin-top: 8px;
      display: inline-block;
      vertical-align: top;
    }
  }
}
</style>